<template>
  <scroll-view :refresher-triggered='triggered' refresher-background='rgba(0,0,0,0)' :refresher-enabled='true'
    :scroll-y="true" class="diy-scroll" @scrolltolower='scrolltolower' :lower-threshold='100'
    @refresherrefresh='refresherrefresh'>
    <slot></slot>
    <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="is_display"
      style="padding-bottom: 20rpx;" />
    <view class="is-display" v-else>
      <u-empty text="没有数据~" mode="list" v-if="Empty"></u-empty>
    </view>
    <view style="text-align: center;color: rgba(0,0,0,.4);padding: 0 0 10rpx;font-size: 24rpx;">技术支持 @ 极客科技</view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    //加载
    is_display: {
      type: [String, Boolean, Number],
      default: true
    },
    // 判断是否还有数据
    Empty: {
      type: [String, Boolean, Number],
      default: true
    },
    status: {
      type: [String, Boolean, Number],
      default: 'loadmore'
    },
  },
  data() {
    return {
      //是否触发刷新 整个页面刷新
      triggered: true,
      //加载选择的数据
      iconType: 'flower',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '努力加载中',
        nomore: '实在没有了',
      }
    }
  },
  mounted() {

  },
  methods: {
    // 触底的时候触发的事件
    scrolltolower() {
      this.$emit('scrolltolower')
    },
    //刷新的时候触发的事件
    refresherrefresh() {
      this.triggered = true;
      this.$emit('refresherrefresh', () => {
        this.triggered = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.diy-scroll {
  height: 100%;
  position: relative;

  .is-display {
    margin-top: 100rpx;
  }
}
</style>